<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component :c-title="title" data-id="id123" @change-title="changeTitle"></my-component>
    </div>

    <script>
        Vue.component('my-component', {
            template: `
                <div>
                    <div>{{cTitle}}</div>
                    <div>内容</div>
                    <button @click="change">change</button>
                </div>
            `,
            props: ['cTitle'],
            data() {
                return {
                
                }
            },
            methods: {
                change() {
                    this.$emit('change-title', '123')
                }
            }
        })
        
        var vm = new Vue({
            el: '#app',
            data: {
                title: '标题十'
            },
            methods: {
                changeTitle(param) {
                    console.log(param)
                    this.title = '标题九九九'
                }
            }
        })
    </script>
</body>
</html>